import React,{useEffect,useState} from 'react'
import axios from 'axios'
import { Button, notification, Table, Tag, Tooltip } from 'antd'

export default function AuditList(props) {

  // 存储表格Table组件需要的数据
  const [dataSource, setdataSource] = useState([])

  // 从本地存储中解构出来用户数据
  const { username } = JSON.parse(localStorage.getItem("token"))

  // 发axios请求获取表格Table组件需要的数据
  useEffect(() => {
    axios.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`, {
    }).then((res) => {
      setdataSource(res.data)
    })
  }, [username])

  // 撤销功能按钮组件的点击事件回调
  const handleRervert = (item) => {
    setdataSource(dataSource.filter((data) => {
      return data.id !== item.id
    }))

    axios.patch(`/news/${item.id}`, { auditState: 0 }).then(res => {
      notification.info({
        message: "通知",
        description: "您可以到草稿箱中查看",
        placement: "top"
      });
    })
  }

  // 修改功能按钮组件的点击事件回调
  const handleUpdate = (item) => {
    // 跳转到指定路由，使对应的路由组件显示
    props.history.push(`/news-manage/update/${item.id}`)
  }

  // 发布功能按钮组件的点击事件回调
  const handlePublish = (item) => {
    axios.patch(`/news/${item.id}`, {
      // 通过请求在后端对应的元素中将下面两个属性的值修改
      publishState: 2,
      publishTime: Date.now()
    }).then(res => {
      props.history.push("/publish-manage/published")

      // 提示框
      notification.info({
        message: "通知",
        description: "你可以在发布管理中的已发布里面查看",
        placement: "top"
      });
    })
  }


  // 设置表格的表头信息
  const columns = [
    {
      title: '新闻列表',
      dataIndex: 'title',
      render: (title, item) => {
        return <Tooltip title="预览内容">
          <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
        </Tooltip>
      }
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render: (category) => {
        return <div>{category.title}</div>
      }
    },
    {
      title: '审核状态',
      dataIndex: 'auditState',
      render: (auditState) => {
        const colorList = ["#2db7f5", "orange", "green", "red"]
        const auditList = ["草稿箱", "审核中", "已通过", "未通过"]
        // 根据当前表格项元素对应的新闻文章的发布状态值来设置组件样式
        return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          {
            // 根据当前表格项元素对应的新闻文章的发布状态值来显示对应的Button组件
            item.auditState === 1 && <Button type="primary" onClick={() => {
              handleRervert(item)
            }}>撤销</Button>
          }

          {
            item.auditState === 2 && 
            <Button 
              style={{ background: "#f6ffed", color: "#389e0d", borderColor: "#b7eb8f" }} type="primary" onClick={() => {
              handlePublish(item)
            }}>发布</Button>
          }

          {
            item.auditState === 3 && <Button danger type="primary" onClick={() => {
              handleUpdate(item)
            }}>修改</Button>
          }

        </div>
      }
    },
  ]


  return (
    <div>
      <Table 
        dataSource={dataSource} 
        columns={columns} 
        pagination={{ pageSize: 6 }}
        // 给表格的每一行表格项元素设置key属性，如果没有就会报错
        rowKey={item => item.id} 
      />
    </div>
  )
}
